<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美动态页面 - 动态日期</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }

        header {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            max-width: 90%;
            width: 800px;
        }

        h1 {
            font-size: 2.8rem;
            color: #4a90e2;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }

        p.subtitle {
            font-size: 1.4rem;
            color: #666;
            margin-top: 0.5rem;
            line-height: 1.6;
        }

        .date-container {
            font-size: 3.5rem;
            font-weight: bold;
            color: #4a90e2;
            margin: 1.5rem 0;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
            animation: fadeIn 2s ease-in-out;
        }

        footer {
            margin-top: 2rem;
            font-size: 1rem;
            color: #888;
        }

        /* 动态背景 */
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }

            p.subtitle {
                font-size: 1.2rem;
            }

            .date-container {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
<canvas id="backgroundCanvas"></canvas>

<header>
    <h1>滕王阁序</h1>
    <p class="subtitle">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p>
    <div class="date-container" id="dynamicDate"></div>
</header>

<footer>
    &copy; 2025 动态页面示例 | 版权所有
</footer>

<script>
    // 动态背景（粒子效果）
    const canvas = document.getElementById('backgroundCanvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particlesArray = [];

    class Particle {
        constructor(x, y, size, speedX, speedY, color) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.speedX = speedX;
            this.speedY = speedY;
            this.color = color;
        }

        update() {
            this.x += this.speedX;
            this.y += this.speedY;

            if (this.size > 0.2) this.size -= 0.05;
        }

        draw() {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    function createParticles(event) {
        const x = event.clientX;
        const y = event.clientY;
        const colors = ['#4a90e2', '#ff6f61', '#6bc5b3', '#5b49fc'];
        for (let i = 0; i < 5; i++) {
            const size = Math.random() * 10 + 5;
            const speedX = (Math.random() - 0.5) * 4;
            const speedY = (Math.random() - 0.5) * 4;
            const color = colors[Math.floor(Math.random() * colors.length)];
            particlesArray.push(new Particle(x, y, size, speedX, speedY, color));
        }
    }

    function handleParticles() {
        for (let i = 0; i < particlesArray.length; i++) {
            particlesArray[i].update();
            particlesArray[i].draw();

            if (particlesArray[i].size <= 0.3) {
                particlesArray.splice(i, 1);
                i--;
            }
        }
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        handleParticles();
        requestAnimationFrame(animate);
    }

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    window.addEventListener('mousemove', createParticles);

    animate();

    // 动态日期功能
    const dynamicDateElement = document.getElementById('dynamicDate');

    function updateDynamicDate() {
        const now = new Date();
        const options = {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        };
        const formattedDate = now.toLocaleDateString('zh-CN', options);
        dynamicDateElement.textContent = `今天是：${formattedDate}`;
    }

    setInterval(updateDynamicDate, 1000); // 每秒更新一次
    updateDynamicDate(); // 初始化显示
</script>
</body>
</html>